<template>
    <div>
        <h1>用户管理页面</h1>
        <table class="center">
                <tr>
                    <td>id</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            <tr v-for="user in users" :key="user.id">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <router-link :to="'/user/edit/'+user.id">修改</router-link>
                    <router-link :to="'/user/'+user.id">详情</router-link>
                </td>
            </tr>
        </table>

        <RouterView />
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
            return {
                users:[
                    {id:1,name:'zs',age:20},
                    {id:2,name:'lisi',age:25}
                ]
            }
        }
    }
</script>

<style scoped>
.center{
    margin: 0 auto;
    width: 50%;
    border:1px solid red;
}
</style>